Flutter Release Preview 2で追加されたCupertinoスタイルのWidgetを試してみた

Flutter Release Preview 2で追加されたCupertinoスタイルのWidgetを試してみました。

#Android

#iPhone

#Flutter

山田良

2018.09.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

大阪オフィスの山田です。ねこに薬を飲ませる時に噛まれて指に穴が空きました。痛い。今回はFlutterの強化されたCupertinoスタイルのWidgetを動かしてみます。Flutter Preview2に関する記事はこちらです。

開発環境

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v0.9.5-pre.12, on Mac OS X 10.13.6 17G65, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.1)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
[✓] Android Studio (version 3.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.27.2)
[✓] Connected device (1 available)

動作画像

今回は以下のWidgetを使用しています。

CupertinoNavigationBar
CupertinoSegmentedControl
CupertinoPicker
CupertinoTimerPicker
CupertinoActionSheet

iOS

Android

実装

CupertinoNavigationBar

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('Cupertino Style'),
      ),
      body: 
        Column(children: <Widget>[
          SizedBox(height: 16.0,),
          Row(children: <Widget>[
            Expanded(child: _buildCupertinoSegmentedControl(),)
            ],
          ),
          Container(
            margin: EdgeInsets.all(16.0),
            child: Text(
              _timeDuration == null ? "select time" : _timeDuration.toString()),
          ),
          Expanded(child: _buildCupertinoTimerPicker(),)
        ],)
      );
  }

titleではなくmiddleというパラメータなんですね。

CupertinoSegmentedControl

 Widget _buildCupertinoSegmentedControl() {
    return CupertinoSegmentedControl(
      children: {
        "1": Text("Action Sheet"),
        "2": Text("Picker"),
      },
      onValueChanged: (value) {
        if (value == "1") {
          _showCupertinoActionSheet(context);
        }
        if (value == "2") {
          _showCupertinoPicker(context);
        }
    },);
  }

デモ用に、onValueChangedイベント中で、アクションシートやピッカーを表示するようにしてます。

CupertinoActionSheet

  _showCupertinoActionSheet(BuildContext context) {
    showCupertinoModalPopup(
      context: context,
      builder: (BuildContext context) {
        return CupertinoActionSheet(
          title: Text("title"),
          message: Text("message"),
          actions: <Widget>[
            CupertinoActionSheetAction(child: Text("none"), onPressed: () { Navigator.pop(context); },),
            CupertinoActionSheetAction(child: Text("default action"), onPressed: () { Navigator.pop(context); }, isDefaultAction: true,),
            CupertinoActionSheetAction(child: Text("destructive action"), onPressed: () { Navigator.pop(context); }, isDestructiveAction: true,),
          ],
          cancelButton: CupertinoActionSheetAction(child: Text("Cancel"), onPressed: () { Navigator.pop(context); },),
        );
      }
    );
  }

showCupertinoModalPopupメソッドのbuilderの中でアクションシートのWidgetを作成しています。詳細についてはこちらに記述があります。各アクションをタップした時に、アクションシートを閉じる処理を書いています。うーん、処理を書かなくてもオプション等で何とかならないかなぁ。

CupertinoPicker

  _showCupertinoPicker(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return CupertinoPicker(
          onSelectedItemChanged: (value) {},
          itemExtent: 30.0,
          children: <Widget>[
            Center(child: Text("item 1")),
            Center(child: Text("item 2")),
            Center(child: Text("item 3")),
            Center(child: Text("item 4")),
            Center(child: Text("item 5")),
          ],
        );
      });
  }

こちらはshowModalBottomSheetメソッドのbuilderの中でピッカーを作成しています。詳細についてはこちら。

CupertinoTimerPicker

  Widget _buildCupertinoTimerPicker() {
    return CupertinoTimerPicker(
      onTimerDurationChanged: (Duration newTimer) {
        setState(() {
          _timeDuration = newTimer;
        });
      }
    );
  }